﻿<script setup lang="ts" name="FolderRename">
import { FolderApi } from '@/api/infra/file'

const { error, success } = useMessage()
const emit = defineEmits(['save', 'close'])

const initInfo = ref({
  dialogVisible: false,
  form: {
    id: 0,
    folder_id: '',
    title: ''
  }
})

// 显示弹窗
const showDialog = (v) => {
  initInfo.value.dialogVisible = true
  initInfo.value.form.id = v.id
  initInfo.value.form.folder_id = v.folder_id
  initInfo.value.form.title = v.title
}

// 子组件将方法暴露给父组件
defineExpose({ showDialog })

// 关闭弹窗
const closeDialog = () => {
  initInfo.value.dialogVisible = false
  emit('close')
}

// 保存
const handleOk = () => {
  if (initInfo.value.form.title === '') {
    error('文件夹名称不能为空')
    return false
  }
  FolderApi.update(initInfo.value.form).then((res:any) => {
    if (res.code === 200) {
      success('文件夹重命名成功！')
      emit('save')
      closeDialog()
    }
  })
}
</script>

<template>
  <ElDialog v-model="initInfo.dialogVisible" title="文件夹重命名" width="700px" align-center @close="closeDialog">
    <ElForm label-width="auto" label-position="top">
      <ElFormItem label="文件夹重命名：">
        <ElInput v-model="initInfo.form.title" clearable maxlength="20" show-word-limit placeholder="请输入文件夹名称，长度不超过20个字" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="closeDialog">取消</ElButton>
        <ElButton type="primary" @click="handleOk">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.el-form{
  padding: 40px 100px;
}
</style>
